<template>
	<view class="page-main">
		<pull-down-page ref="pullDownPage" :subsectionList="subsectionList" @pullDownRefresh="pullDownRefresh"
			@sectionChange="onSectionChange" @scrolltolower="onTaskList">
			<template slot="swiper-item-0">
				<u-empty mode="data" icon="/static/data.png" v-if="list.length==0" />
				<view class="card-list" v-for="(item, index) in list" :key="index">
					<view class="head">
						<view class="left">
							<view class="circular" :style="'background-color:'+level[item.level]" />
						</view>
					</view>
					<view class="main">
						<u-row customStyle="position: relative;">
							<u-col span="3">
								<u--image :showLoading="true" :src="item.taskImages||'/static/renwu.png'" shape="circle"
									width="80px" height="80px"
									@click="onPopupImages(item.taskImages||'/static/renwu.png')" />
							</u-col>
							<u-col span="7">
								<view>
									<view class="main-title">
										<u--text :text="item.taskContent" />
									</view>
									<view class="main-integral">
										<u--text type="info" :text="item.integral" prefixIcon="integral-fill"
											iconStyle="color:#ffaaff;margin-right: 3px;">
										</u--text>
									</view>
								</view>
							</u-col>
							<u-col span="2">
								<u--text v-if="item.total>1" :text="item.completed+'/'+item.total+'次'" type="info"
									align="center" />
								<u--text v-else :text="item.total+'次'" type="info" align="center" />
							</u-col>
						</u-row>
					</view>
					<view class="tail">
						<view class="left">
							<u--text :text="item.createTime" prefixIcon="/static/kaishi.png"
								iconStyle="width: 22px;height: 22px;margin-right: 3px;" />
						</view>
						<view class="right">
							<view class="upload-box left">
								<u-button size="small" text="上传" @click="onUpload(item)" />
							</view>
							<view class="complete-box right">
								<u-button type="success" size="small" text="完成" @click="onComplete(item)" />
							</view>
						</view>
					</view>
				</view>
			</template>

			<template slot="swiper-item-1">
				<u-empty mode="data" icon="/static/data.png" v-if="historyList.length==0" />
				<view class="card-list" v-for="(item, index) in historyList" :key="index">
					<view class="head">
						<view class="left">
							<view class="circular" :style="'background-color:'+level[item.level]" />
						</view>
					</view>
					<view class="main">
						<u-row customStyle="position: relative;">
							<u-col span="3">
								<u--image :showLoading="true" :src="item.taskImages||'/static/renwu.png'" shape="circle"
									width="80px" height="80px"
									@click="onPopupImages(item.taskImages||'/static/renwu.png')" />
							</u-col>
							<u-col span="7">
								<view>
									<view class="main-title">
										<u--text :text="item.taskContent" />
									</view>
									<view class="main-integral">
										<u--text type="info" :text="item.integral" prefixIcon="integral-fill"
											iconStyle="color:#ffaaff;margin-right: 3px;">
										</u--text>
									</view>
								</view>
							</u-col>
							<u-col span="2">
								<u--text v-if="item.total>1" :text="item.completed+'/'+item.total+'次'" type="info"
									align="center" />
								<u--text v-else :text="item.total+'次'" type="info" align="center" />
							</u-col>
						</u-row>
					</view>
					<view class="tail">
						<view class="left">
							<u--text :text="item.completedTime" prefixIcon="/static/jieshu.png"
								iconStyle="width: 22px;height: 22px;margin-right: 3px;" />
						</view>
						<view class="complete-box right">
							<u-tag v-if="item.status==2" type="success" plain text="待评价" />
							<u-tag v-else type="success" plain text="已完成" />
						</view>
					</view>
				</view>
			</template>
		</pull-down-page>

		<u-popup :show="showImages" @close="showImages=false" mode="center" bgColor="transparent" overlayOpacity="0.8">
			<u--image :showLoading="true" width="100vw" height="100vh" mode="aspectFit" :src="popupImages"
				@click="showImages=false" />
		</u-popup>
	</view>
</template>

<script>
	import pullDownPage from '@/components/myCustom/pull-down-page'

	export default {
		components: {
			pullDownPage
		},
		data() {
			return {
				subsectionList: ['未完成的任务', '已完成的任务'],
				swiperIndex: 0,
				list: [],
				historyList: [],
				level: ["#2979ff", "#19be6b", "#f5f509", "#ff9900", "#fa3534"],
				showImages: false,
				popupImages: '',
				currentPage: [1, 1], //当前页数
				pageSize: 10, //每页数据条数
				totalData: [1, 1], //数据总数
				isRefresh: false
			}
		},
		onLoad() {
			this.onTaskList(this.swiperIndex);
		},
		methods: {
			pullDownRefresh(swiperIndex) {
				this.currentPage[swiperIndex] = 1
				this.totalData[swiperIndex] += 100
				this.onTaskList(swiperIndex)
			},
			onSectionChange(swiperIndex) {
				this.swiperIndex = swiperIndex
				this.onTaskList(swiperIndex)
			},
			onTaskList(swiperIndex) {
				const total = this.totalData[swiperIndex],
					currentPage = this.currentPage[swiperIndex],
					user = this.vuex_user
				if (swiperIndex == 0 && total > this.list.length) {
					this.$http.get("/taskList/page", {
						completedId: user.id,
						status: 0,
						page: currentPage,
						size: this.pageSize
					}).then((res) => {
						let data = res.data
						if (this.isRefresh) {
							this.isRefresh = false
							this.list = data.records
						} else {
							this.list.push(...data.records)
						}
						this.currentPage[swiperIndex] += 1
						this.totalData[swiperIndex] = data.total
						this.$refs.pullDownPage.stopRefresh();
					}).catch((err) => {
						this.$refs.pullDownPage.stopRefresh();
						uni.$u.toast(err.message)
					});
				} else if (swiperIndex == 1 && total > this.historyList.length) {
					this.$http.get("/taskList/page", {
						completedId: user.id,
						status: 2,
						page: currentPage,
						size: this.pageSize
					}).then((res) => {
						let data = res.data
						if (this.isRefresh) {
							this.isRefresh = false
							this.historyList = data.records
						} else {
							this.historyList.push(...data.records)
						}
						this.currentPage[swiperIndex] += 1
						this.totalData[swiperIndex] = data.total
						this.$refs.pullDownPage.stopRefresh();
					}).catch((err) => {
						this.$refs.pullDownPage.stopRefresh();
						uni.$u.toast(err.message)
					});
				}

			},
			onUpload(item) {
				uni.navigateTo({
					url: `/pages/tasklist/complete/upload/upload?id=${item.id}`
				});
			},
			onComplete(item) {
				if (item.isUpload && item.images == null) {
					uni.$u.toast('请先上传图片')
					return;
				}
				uni.showLoading({
					title: '操作中',
					mask: true
				});
				item.completed += 1
				let update
				if (item.completed >= item.total) {
					update = {
						id: item.id,
						status: 2,
						completedTime: new Date()
					}
				} else {
					update = {
						id: item.id,
						completed: item.completed
					}
				}
				this.$http.post("/taskList/update", update)
					.then((res) => {
						Object.assign(item, update);
						if (update.status === 2) {
							const index = this.list.findIndex(e => e.id === item.id)

							this.list.slice(index, 1)
							this.historyList.unshift(item)
							this.tmpInsert[1] += 1
							this.totalData[1] += 1
						}
						uni.hideLoading();
						uni.$u.toast('已完成')
					}).catch((err) => {
						uni.hideLoading();
						uni.$u.toast(err.message)
					});
			},
			onPopupImages(item) {
				this.popupImages = item;
				this.showImages = true;
			}
		}
	}
</script>

<style>
	.page-main {
		padding: 0;
	}

	.swiper {
		height: calc(100vh - 30px - 40px);
	}

	.card-list {
		margin: 30rpx;
		padding: 20rpx;
		background-color: antiquewhite;
		border-radius: 15px;
		box-shadow: 1px 2px 5px #c8c8c8;
	}

	.u-list-item:last-child {
		margin-bottom: 80px;
	}

	.head {
		height: 35px;
		line-height: 35px;
	}

	.main {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.tail {
		height: 40px;
		line-height: 40px;
	}

	.main-title {
		position: absolute;
		width: 340rpx;
		top: 0;
	}

	.main-integral {
		position: absolute;
		margin-top: 10px;
		bottom: 0;
	}

	.circular {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		margin: 5px;
	}

	.upload-box {
		width: 61px;
		margin-top: 5px;
		margin-right: 10px;
	}

	.complete-box {
		width: 61px;
		margin-top: 5px;
	}

	.left {
		float: left;
	}

	.right {
		float: right;
	}
</style>